<template>
	<view class="successor-container">
		<view class="u-p-l-32 u-p-r-32 u-m-t-16">
			<u-search placeholder="搜索承接人姓名" v-model="keyword" bg-color="rgba(0,0,0,0.03)"
			search-icon-color="#000" placeholder-color="rgba(0,0,0,0.3)" :show-action="false" height="96"
			border-radius="24"></u-search>
		</view>
		<scroll-view style="height:80vh" scroll-y>
			<view class="successor-list">
				<u-radio-group v-model="value" @change="radioGroupChange">
					<u-radio 
						@change="radioChange" 
						v-for="(item, index) in 30" :key="index" 
						:name="item.name"
						:disabled="item.disabled"
						class="successor-item"
					>
					 <text class="successor-person-name">文梓海</text>
					</u-radio>
				</u-radio-group>
			</view>
		</scroll-view>
		<view class="confirm-btn">
			确认承接人
		</view>
	</view>
</template>

<script>
import { defineComponent,reactive, toRefs, onMounted} from "vue"
	export default defineComponent({
		components: {
		
		},
		setup(props,context) {
			const data = reactive({
				
			})
			onMounted(()=> {
			  keyword: ''
			})
			return {
				...toRefs(data)
			}
		}
	})
</script>

<style>
  .u-content {
		border-radius: 24rpx !important;
	}
</style>

<style lang="scss" scoped>

	.successor-container {
		.successor-list {
			padding-left: 22rpx;
			.successor-item {
				border-bottom: 1rpx solid rgba(0,0,0,0.1);
				height: 111rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
		    padding-right:32rpx;
				.successor-person-name {
					font-size: 32rpx;
					font-family: PingFang SC-Regular, PingFang SC;
				}
			}
		}
		.confirm-btn {
			height: 160rpx;
			height: 96rpx;
			background: #476BEE;
			border-radius: 20rpx;
			text-align: center;
			line-height: 96rpx;
			font-size: 32rpx;
			font-family: PingFang SC-Semibold, PingFang SC;
			font-weight: 600;
			color: #FEFEFE;
			margin: 32rpx;
		}
	}
</style>